<template>
  <div class="unit-stats-container">
    <div class="unit-stats-table">
      <div class="table-header">
        <div class="header-cell">被检单位</div>
        <div class="header-cell">检测数量</div>
        <div class="header-cell">合格率</div>
      </div>
      <div class="table-body-wrapper">
        <div
            class="table-body"
            ref="scrollContainer"
            @mouseenter="pauseScroll"
            @mouseleave="resumeScroll"
        >
          <div
              v-for="(unit, index) in sortedUnits"
              :key="unit.name"
              class="table-row"
          >
            <div class="table-cell unit-name">{{ unit.name   }}</div>
            <div class="table-cell">{{ unit.totalTests.toLocaleString()   }}</div>
            <div class="table-cell">
              <div class="rate-container">
                <span :class="getRateClass(unit.passRate)">{{   unit.passRate   }}%</span>
                <div
                    class="rate-bar"
                    :style="{
                    width: `${unit.passRate}%`,
                    background: getRateColor(unit.passRate)
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'UnitStatsTable',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  setup(props) {
    const scrollContainer = ref(null)
    let scrollInterval = null
    let isPaused = false
    const scrollSpeed = 200 // 滚动速度，值越小滚动越快
    const scrollDelay = 1000 // 回到顶部时的过渡时间(ms)

    const sortedUnits = computed(() => {
      return [...props.data].sort((a,  b) => b.totalTests  - a.totalTests)
    })

    const getRateColor = (rate) => {
      if (rate < 50) return 'linear-gradient(90deg, #ff4d4f, #ff7875)'
      if (rate < 75) return 'linear-gradient(90deg, #ffa940, #ffc069)'
      return 'linear-gradient(90deg, #52c41a, #73d13d)'
    }

    const getRateClass = (rate) => {
      if (rate < 50) return 'rate-low'
      if (rate < 75) return 'rate-medium'
      return 'rate-high'
    }

    const pauseScroll = () => {
      isPaused = true
    }

    const resumeScroll = () => {
      isPaused = false
    }

    const startAutoScroll = () => {
      if (scrollContainer.value)  {
        const container = scrollContainer.value
        const totalHeight = container.scrollHeight
        const visibleHeight = container.clientHeight

        // 如果内容不需要滚动，则不启动自动滚动
        if (totalHeight <= visibleHeight) return

        let scrollPosition = 0

        scrollInterval = setInterval(() => {
          if (isPaused) return

          scrollPosition += 1

          // 判断是否滚动到底部
          if (scrollPosition >= totalHeight - visibleHeight) {
            // 平滑过渡回到顶部
            setTimeout(() => {
              scrollPosition = 0
              container.scrollTop  = 0
            }, scrollDelay)
          }

          container.scrollTop  = scrollPosition
        }, scrollSpeed)
      }
    }

    const stopAutoScroll = () => {
      if (scrollInterval) {
        clearInterval(scrollInterval)
        scrollInterval = null
      }
    }

    onMounted(() => {
      startAutoScroll()
    })

    onUnmounted(() => {
      stopAutoScroll()
    })

    return {
      sortedUnits,
      getRateColor,
      getRateClass,
      scrollContainer,
      pauseScroll,
      resumeScroll
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.unit-stats-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.unit-stats-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.table-header {
  display: flex;
  background: rgba(11, 93, 232, 0.25);
  padding: 10px 0;
  border-radius: 6px 6px 0 0;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(79, 216, 222, 0.15);
  border-bottom: none;
  flex-shrink: 0;
}

.header-cell {
  flex: 1;
  text-align: center;
  font-weight: 500;
  color: #4fd8de;
}

.table-body-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  border: 1px solid rgba(79, 216, 222, 0.15);
  border-top: none;
  background: rgba(13, 42, 67, 0.3);
}

.table-body {
  height: 100%;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth; /* 添加平滑滚动效果 */
}

.table-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.table-row:hover {
  background: rgba(79, 216, 222, 0.05);
  transform: translateX(2px);
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.unit-name {
  justify-content: flex-start;
  padding-left: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.rate-container {
  position: relative;
  width: 90%;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rate-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: all 0.6s ease;
}

.rate-container span {
  position: relative;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.rate-high {
  color: #b7eb8f;
}

.rate-medium {
  color: #ffd666;
}

.rate-low {
  color: #ff9c6e;
}

/* 自定义滚动条 */
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(13, 42, 67, 0.3);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4fd8de, #0b5de8);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7be4e8, #2d74e8);
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-row {
  animation: fadeIn 0.4s ease forwards;
}
</style>